<template>
    <div class="text-white w-p-100 h-p-100 flex-col">
        <div class="card-title w-p-100 flex justif-between">
            <div class="flex1 text-center" :style="{textAlign:align[index]}" v-for="(item, index) in tableConfig" :key="index">{{ item.title }}</div>
        </div>
        <div class="card-item w-p-100 flex justif-between" v-for="(ite, idx) in tableData" :key="idx">
            <div class="flex1 flex align-center" :style="{justifyContent:align[ix]}" v-for="(it, ix) in tableConfig" :key="ix">
                <span v-if="ix==0" class="card-num" :style="{backgroundColor:bgColor[idx]}">{{ idx+ 1 }}</span>
                {{ ite[it.id] }}
            </div>
        </div>
    </div>
</template>

<script setup>
const prop = defineProps({
    tableConfig: {
        Type:Array,
        default: () => []
    },
    tableData: {
        Type: Array,
        default: () => []
    },
    bgColor: {
        Type: Array,
        default: () => ['#FFDE00','#E9E9E9','#FF6600','#008FFF','#008FFF']
    }


})
const align = ['left','center','right']


</script>

<style scoped>
.card-title {
    color:#5C83BB;
}
.card-item {
    background: rgba(17,44,84,0.53);
    margin: 10px 0;
    padding:10px 4px;
}
.card-num {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color:black;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right:10px;

}

</style>